<template>
	<view class="gift">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<view class="topBox">
				<view class="head1">
					<view class="searchBox">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721975652195245.png" mode="">
						</image>
						<input type="text" v-model="searchValue" @input="searchCustomers" placeholder="请输入搜索内容" />
						<!-- <button style="width: 50rpx; height: 30rpx; background-color: #000;"></button> -->
					</view>
				</view>
				<view class="topList">
					<block v-for="(item, index) in tabList" :key="index">
						<view class="topCell" :class="item.value == nowIndex ? 'topCellIng' : ''"
							@click="chooseTab(item.value)">
							{{ item.label }}
							<view class="unReadNum" v-if="item.count">{{ item.count }}</view>
						</view>
					</block>
				</view>
			</view>
			<view style="height: 210rpx;"></view>

			<block v-if="orderList.length > 0">
				<view class="itemBox" v-for="(item, index) in orderList" :key="index">
					<view class="orderNoBox" @click="copyText(item.OrderNo)">订单号：{{ item.OrderNo }}
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1739786317520497.png"
							mode="widthFix" />
					</view>
					<view class="single" v-if="item.Item.length">
						<view class="border" v-for="(el, i) in item.Item" :key="i"
							@click="nav_to(`/pages/order/orderDetail?id=${item.ID}`)">
							<view class="single_img">
								<image :src="imgeone(el.ProductImg)" mode="aspectFill"></image>
							</view>
							<view class="single_right">
								<view class="single_title">
									<view class="single_title_text">
										{{ el.ProductName || '--' }}
									</view>
									<view class="single_title_state" v-if="i == 0">{{ getStatus(item.Status) }}</view>
								</view>

								<view class="single_tabs" v-if="tagsArray.length">
									<view class="single_tab" v-for="(tag, index) in tagsArray" :key="index">{{ tag }}
									</view>
								</view>
								<view class="single_spec">
									<view class="single_style" style="width: 76%;">
										{{ el.Style || '--' }}
									</view>
									<view class="single_style">数量：{{ el.Qty || '--' }}</view>
								</view>
								<view class="single_bottom">
									<view class="single_price">
										<view class="dollor">￥</view>
										{{ item.Price || '--' }}
									</view>
									<view class="user_send" v-if="item.OrderType == '赠送订单'">
										<view class="head">
											<image
												:src="item.SenderHeadImgUrl || 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722996894207462.png'"
												mode="aspectFill"></image>
										</view>
										<view class="name">
											{{ item.SenderName || '--' }}赠送
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="time">
							订单时间：{{ $util.formatDateTime(item.OrderTime) }}
						</view>
						<view class="priceBox">
							<view class="disPrice" v-if="item.Discounts > 0">
								<view class="priTitle">已优惠</view>
								<view class="priLogo">¥</view>
								<view class="priNum">{{ item.Discounts }}</view>
							</view>
							<view class="payPrice" v-if="nowIndex != 0">
								<view class="priTitle">实付款</view>
								<view class="priLogo">¥</view>
								<view class="priNum">{{ item.PayMoney }}</view>
							</view>

						</view>
						<view class="orderBtnBox">
							<view class="obBox">
								<view class="confirmReceipt" v-if="item.Status == 3" @click="confirmOrder(item)">确认收货
								</view>
							</view>
						</view>
					</view>

				</view>
			</block>
			<block v-else>
				<EmptyBox text="还没订单哦"></EmptyBox>
			</block>
			
			<BtmLogo></BtmLogo>
		</block>
	</view>
</template>

<script>
import color from 'uview-ui/libs/config/color';

export default {
	data() {
		return {
			load: false, //是否加载
			PageIndex: 1, //页码
			orderList: [], //商品列表
			isMore: true, //是否还有更多
			tagsArray: [],
			tabList: [
				//顶部状态选择
				{
					label: '全部',
					value: 99,
					count: 0
				},
				{
					label: '待付款',
					value: 0,
					count: 0
				},
				{
					label: '待发货',
					value: 1,
					count: 0
				},
				{
					label: '待签收',
					value: 3,
					count: 0
				},
				{
					label: '已完成',
					value: 4,
					count: 0
				},
				// {
				// 	label: '已取消',
				// 	value: -1,
				// 	count:0
				// },
			],
			nowIndex: 99, //当前选中状态
			searchValue: ''
		};
	},

	computed: {},
	watch: {},

	onReady() { },

	async onLoad(e) {
		this.nowIndex = e.index || 99
		this.getList();
		this.getMyCount()
		uni.$on('updateOrder', () => {
			this.PageIndex = 1
			this.getList();
			this.getMyCount()
		})
	},
	onUnload() {
		uni.$off('updateOrder')
	},
	methods: {
		// 点击复制到剪切板
		copyText(data) {
			if (data) {
				uni.setClipboardData({
					data,
					success: (res) => {
						this.$pv.msg('复制成功')
					},
					fail: (err) => {
						this.$pv.msg('复制失败')
					}
				})
			}

		},
		searchCustomers(e) {
			this.$util.debounce(() => {
				this.searchValue = e.detail.value.replace(/\s+/g, "")
				this.PageIndex = 1
				this.getList({ Keywords: this.searchValue });
				this.getMyCount()
			}, 300)
		},
		async getMyCount() {
			for (var i = 0; i < this.tabList.length; i++) {
				if (i == 1 || i == 2 || i == 3) {
					this.tabList[i].count = await this.getUnread(this.tabList[i].value)
				}
			}
		},
		async getUnread(Status) {
			let res = await this.$api.post('/Order/MyOrders', {
				PageIndex: 1,
				PageSize: 999,
				Status
			})
			return res.data.length || 0
		},
		getStatus(s) {
			return s == -2 ? '已退款' : s == -1 ? '已取消' : s == 0 ? '待付款' : s == 1 ? '待发货' : s == 2 ? '待填地址' : s == 3 ? '待签收' : s == 4 ? '已完成' : ''
		},
		imgeone(img) {
			if (img && typeof (img) == 'string') {
				return img.split(',')[0];
			}
		},
		// 获取商品列表
		async getList(params = {}) {
			// 当想看数据的时候使用这个（借用礼品库接口），因为购买的订单还没数据
			const res = await this.$api.post('/Order/MyOrders', {
				PageIndex: this.PageIndex, // 页码
				PageSize: 30, // 一页数量
				Status: this.nowIndex,
				...params
			});

			if (res.code == 0) {
				this.orderList = this.PageIndex == 1 ? res.data : this.orderList.concat(res.data);
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
				this.load = true;
			}


		},
		// 选择Tab
		chooseTab(value) {
			this.nowIndex = value;
			this.PageIndex = 1;
			this.getList();
		},
		confirmOrder(item) {
			const that = this
			uni.showModal({
				title: '提示',
				content: '确定要确认收货吗？',
				success: async function (res) {
					if (res.confirm) {
						const res = await that.$api.post('/Order/CheckOrder', {
							ID: item.ID
						});
						const {code,data,msg} = res
						if(code == 0){
							that.$pv.msg('确认收货成功')
							that.PageIndex = 1;
							that.getList();
						}else{
							that.$pv.msg(msg)
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	},

	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
			this.getList();
		}
	},
};
</script>

<style lang="scss">
page {
	// height: 100%;
	background: #f6f6f6;
}

.gift {
	display: flex;
	flex-direction: column;
	align-items: center;
	// padding-top: 100rpx;
	padding-bottom: 80rpx;

	.itemBox {
		// margin: 30rpx 0;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 18rpx;

		.orderNoBox {
			padding: 20rpx;
			color: #333333;
			font-size: 30rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;

			image {
				display: block;
				width: 34rpx;
				margin-left: 10rpx;
			}
		}

		.single {
			width: 700rpx;
			// height: 252rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			.time {
				color: #999;
				font-size: 26rpx;
				// padding-bottom: 20rpx;
			}

			.border {
				display: flex;
				align-items: center;
				// border-bottom: 1rpx solid #E4E4E4;
				padding: 20rpx 0;

				.single_img {
					width: 204rpx;
					height: 204rpx;
					margin-right: 10rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.single_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 10rpx;
					/* margin: 0 5rpx 0 10rpx; */
					min-height: 200rpx;

					.single_title {
						width: 100%;
						display: flex;
						// align-items: center;
						justify-content: space-between;

						.single_title_text {
							width: 340rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							display: -webkit-box;
							/*弹性伸缩盒子模型显示*/
							-webkit-box-orient: vertical;
							/*排列方式*/
							-webkit-line-clamp: 2;
							/*显示文本行数(这里控制多少行隐藏)*/
							overflow: hidden;
							/*溢出隐藏*/
						}

						.single_title_state {
							// flex: 1;
							font-weight: 500;
							font-size: 28rpx;
							color: #5d8bf8;
						}
					}

					.single_tabs {
						display: flex;
						margin: 10rpx 0 10rpx -5rpx;

						.single_tab {
							width: 104rpx;
							height: 36rpx;
							border-radius: 8rpx;
							border: 1rpx solid #5d8bf8;
							font-size: 20rpx;
							color: #5d8bf8;
							margin: 0 5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.single_spec {
						font-size: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 24rpx;

						.single_style {
							font-weight: 500;
							font-size: 24rpx;
							// color: #999999;
							color: #5d8bf8;
						}
					}

					.single_bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-wrap: wrap;

						.single_price {
							font-weight: bold;
							font-size: 42rpx;
							color: #fc394b;
							display: flex;
							align-items: baseline;

							.dollor {
								font-weight: bold;
								font-size: 24rpx;
								color: #fc394b;
							}
						}

						.user_send {
							display: flex;
							align-items: center;

							.head {
								width: 40rpx;
								height: 40rpx;
								margin-right: 8rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.name {
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
			}

			.border:last-child {
				border-bottom: none;
			}

			.priceBox {
				width: 100%;

				.payPrice {
					display: flex;
					align-items: baseline;
					justify-content: flex-end;
					color: #333333;

					.priTitle {
						font-size: 26rpx;
						margin-right: 6rpx;
						color: #333333;
					}

					.priLogo {
						font-size: 20rpx;
						font-weight: bold;
						color: #333333;
					}

					.priNum {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
					}
				}

				.disPrice {
					display: flex;
					align-items: baseline;
					justify-content: flex-end;
					color: #5d5a5a;

					.priTitle {
						font-size: 26rpx;
						margin-right: 6rpx;
						color: #5d5a5a;
					}

					.priLogo {
						font-size: 20rpx;
						font-weight: bold;
						color: #fc394b;
					}

					.priNum {
						font-size: 30rpx;
						font-weight: bold;
						color: #fc394b;
					}
				}

			}

			.orderBtnBox {
				width: 100%;

				.obBox {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.confirmReceipt {
						margin-top: 12rpx;
						padding: 12rpx 24rpx;
						border-radius: 14rpx;
						background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
						color: white;
						font-weight: bold;
						font-size: 22rpx;
					}
				}
			}
		}
	}
}

.topBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #ffffff;

	.head1 {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: fixed;
		// top: 0;
		// left: 0;
		box-shadow: 0 0 8rpx #ccc;

		.searchBox {
			width: 93%;
			height: 72rpx;
			background: #F6F6F6;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			color: #666666;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 10rpx 0 20rpx;
			}

			input {
				width: 80%;
			}
		}
	}

	.topList {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.topCell {
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			position: relative;
		}

		.topCellIng {
			position: relative;
			color: #5d8bf8;

			&::before {
				position: absolute;
				content: '';
				left: 0;
				bottom: -18rpx;
				width: 100%;
				height: 6rpx;
				background: #5d8bf8;
				border-radius: 5rpx;
			}
		}

		.unReadNum {
			max-width: 48rpx;
			min-width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: -30rpx;
			top: -10rpx;
			font-size: 22rpx;
			background-color: #FC201C;
			color: white;
			padding: 5rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
